import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Text,
    FlatList
} from 'react-native'
import NavBar from 'src/components/navBar'
import {deviceHeight} from "src/util"
import Layer from "src/components/Layer"
import {inject} from "mobx-react/native"
import navigationhelper from "src/components/navigationhelper"
import drawManager from '../../../service/Home'

@inject('userAuth')
export default class DrawMoneyHistory extends Component<{}> {


    refreshing = false;
    hadMore = false;
    pageSize = 20;
    pageIndex = 1;


    constructor (props) {
        super(props)
        this.state = {
            dataList:[]
        }
    }

    componentDidMount=()=>{
        this.getDataList()
    }

    getDataList=()=>{
        this.refreshing = true;
        Layer.showLoading()
        drawManager.fetchDrawMoneyList({
            token:this.props.userAuth.token
        }).then((res)=>{
            Layer.hiddenLoading()
            this.refreshing = false;
            if(res.status == 'success'){
             let rows = res.data.list;
             console.log(rows)
            if (this.pageIndex === 1) {
              this.setState({dataList:rows});
            } else {
              this.setState({dataList:this.state.dataList.concat(rows)});
          }
          this.hadMore = (rows.length === this.pageSize);
         }
        else{
                Layer.showMsg(res.message)
         }
          }).catch((res)=>{
            Layer.hiddenLoading()
            this.refreshing = false;
            Layer.showMsg(res.message)
          }) 
    }
     ListEmptyComponent=()=> {
        return(
          <View style={{ height: deviceHeight *0.5,alignItems: 'center', justifyContent: 'center' }}>
          <Text style={{fontSize:25,color:'#8E8E93',fontWeight:'bold'}}>暂无数据</Text>
         </View>
        )
    }
    _renderRefresh = () => {
        this.pageIndex = 1;
        this.getDataList();
      }
      _onEndReached = () => {
        if (!this.refreshing && this.hadMore) {
            this.pageIndex++;
            this.getDataList();
        }
    }

    getStutas=(status)=>{
        let  statusStr;
        switch (status) {
            case 0: {
                statusStr = '申请中'
                break;
            }
            case 1: {
                statusStr = '已审核'
                break;
            }
            case 2: {
                statusStr = '已驳回'
                break;
            }
            case 3: {
                statusStr = '打款中'
                break;
            }
            case 4: {
                statusStr = '已打款'
                break;
            }
            case 5: {
                statusStr = '打款失败'
                break;
            }
            default: {
              break;
            }
        }
       return statusStr;
    }
    render() {
        return (
        <View style={{flex:1}}>
                <NavBar 
                 back={()=>{navigationhelper.goBack() }}
                 title="提现记录"
         />
        <FlatList
        refreshing={this.refreshing}
        onRefresh={()=>{this._renderRefresh}}
        style={{marginTop:10}}
        ListEmptyComponent={this.ListEmptyComponent}
        data={this.state.dataList}
        keyExtractor={(item, index) =>index}
        ItemSeparatorComponent={this.SeparatorView}
        onEndReachedThreshold={0.1}
        renderItem={({item}) =>
        {
            let status =  item.status
          return(
              <View style={{paddingHorizontal:20,backgroundColor:'#fff',paddingVertical:15,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
              <View style={{flexDirection:'column'}}>
                  <View style={{flexDirection:'row',alignItems:'center'}}>
                  <Text style={{color:'#000000',fontSize:14}}>提现</Text>
                  <Text style={{marginLeft:10,color:'#378EFB'}}>¥{item.amount}</Text>
                  </View>
                  <View style={{marginTop:10}}>
                  <Text style={{color:'#8E8E93',fontSize:11}}>{item.create_time}</Text>
                  </View>
              </View>
              <View>
                  <Text style={{color:'#8E8E93',fontSize:13}}>{this.getStutas(status)}</Text>
              </View>
              </View>
           )
         }
        }/>
        </View>   
     )}
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F5F5'
    },
})